﻿@model ExceptionEmailListViewModel
@{
    ViewBag.Title = "Password Authentication";
}

<section role="main" class="container main-container">
    <h2>Current exception list with password authentication</h2>
    <table class="table" aria-label="Current exception email list">
        @foreach (var emailAddress in Model.EmailList)
        {
            <tr>
                @using (Html.BeginForm("RemoveEmailAddress", "PasswordAuthentication"))
                {
                    <th>@emailAddress</th>
                    <th>
                        @Html.AntiForgeryToken()
                        @Html.Hidden("emailAddress", emailAddress)
                        <button class="btn-link">
                            <span>Remove</span>
                        </button>
                    </th>
                }
            </tr>
        }
    </table>

    <h2>Add EmailAddress enable password authentication</h2>
    @using (Html.BeginForm("AddEmailAddress", "PasswordAuthentication"))
    {
        @Html.AntiForgeryToken()
        <div class="row-checkbox-label">
            <input type="text" class="input-brand" placeholder="emailAddress" name="emailAddress" />
            <button type="submit" class="btn btn-brand">Add</button>
        </div>
    }

    <h2>Search a user for credential</h2>

    <form>
        <textarea placeholder="Search for a user if has linked MSA/(Microsoft Entra ID) credential by entering email address or username" autocomplete="off" autofocus style="width: 100%;" rows="5" class="textarea-brand" data-bind="value: searchQuery"></textarea><br />
        <input type="button" class="btn-brand-secondary" value="Search" data-bind="click: search" />
    </form>

    <div style="display: none" data-bind="visible: searchResults().length === 0 && doneSearching()">
        <p>No account found.</p>
    </div>

    <table class="table" id="searchResults" style="display: none" data-bind="visible: searchResults().length > 0" aria-label="Search results">
        <thead>
            <tr>
                <th>AccountName</th>
                <th>Email Address</th>
                <th>IsAADorMACredential</th>
                <th>Credential Type</th>
                <th>TentendID</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: searchResults">
            <tr>
                <td><a href="#" data-bind="text: Username, attr: { href: $parent.generateProfileUrl($data) }"></a></td>
                <td><span data-bind="text: EmailAddress"></span></td>
                <td><span data-bind="text: IsAADorMACredential"></span></td>
                <!-- ko if: Credential -->
                <td><span data-bind="text: Credential.Type"></span></td>
                <td><span data-bind="text: Credential.TenantId"></span></td>
                <!-- /ko -->
            </tr>
        </tbody>
    </table>
</section>

@section BottomScripts {
    <script>
        $(document).ready(function () {
            var viewModel = function () {
                var $self = this;

                this.searchQuery = ko.observable('');
                this.doneSearching = ko.observable(false);

                this.search = function () {
                    $self.doneSearching = ko.observable(false);
                    $.ajax({
                        url: '@Url.Action("Search", "PasswordAuthentication", new {area = "Admin"})?query=' + encodeURIComponent($self.searchQuery().trim()),
                            cache: false,
                            dataType: 'json',
                            success: function (data) {
                                $self.searchResults.removeAll();
                                for (var i = 0; i < data.length; i++) {
                                    data[i].Selected = ko.observable(false);
                                }
                                $self.searchResults(data);
                            }
                        })
                        .fail(function(jqXhr, textStatus, errorThrown) {
                            alert("Error: " + errorThrown);
                        })
                        .always(function () {
                            $self.doneSearching(true);
                        });
                };
                this.generateProfileUrl = function (u) {
                    return '/profiles/' + u.Username;
                };

                this.searchResults = ko.observableArray([]);

                this.areUsersSelected = ko.computed(function () {
                    for (var i = 0; i < $self.searchResults().length; i++) {
                        if ($self.searchResults()[i].Selected()) {
                            return true;
                        }
                    }
                    return false;
                });
            };

            ko.applyBindings(new viewModel(), $('.main-container').get(0));
        });
    </script>
}